<template>
  <div ref="editorContainer" style="min-height: 300px;"></div>
</template>

<script>
import Quill from 'quill';
import 'quill/dist/quill.core.css';
import 'quill/dist/quill.snow.css';
import 'quill/dist/quill.bubble.css';
import { onMounted, onBeforeUnmount, ref, watch } from 'vue';
import { ElMessage } from 'element-plus';
import axios from 'axios';

// 简单的防抖函数
function debounce(fn, delay) {
  let timer = null;
  return function(...args) {
    if (timer) {
      clearTimeout(timer);
    }
    timer = setTimeout(() => {
      fn.apply(this, args);
    }, delay);
  };
}

// Custom image handler for Quill
function imageHandler(quillInstance, clubId, uploaderId) {
  const input = document.createElement('input');
  input.setAttribute('type', 'file');
  input.setAttribute('accept', 'image/*');
  input.click();

  input.onchange = async () => {
    // 使用传递进来的 quillInstance
    if (!quillInstance) {
      console.error('Quill editor instance is not available.');
      ElMessage.error('编辑器状态异常，无法上传图片。');
      return;
    }

    const file = input.files[0];
    if (file) {
      // 检查文件大小 (与后端限制一致)
      const MAX_FILE_SIZE = 10 * 1024 * 1024; // 10MB
      if (file.size > MAX_FILE_SIZE) {
        ElMessage.error("文件大小不能超过 10 MB");
        return;
      }

      const formData = new FormData();
      formData.append('file', file);
      if (clubId) {
        formData.append('clubId', clubId);
      }
      if (uploaderId) {
        formData.append('uploaderId', uploaderId);
      }

      try {
        // 调用后端上传接口
        const response = await axios.post('http://localhost:8080/files/wang/upload', formData);
        
        console.log('Quill Upload Response:', response.data);

        // 假设后端返回的格式是 { errno: 0, data: [{ url: "..." }] }
        if (response.data && response.data.errno === 0 && response.data.data && Array.isArray(response.data.data) && response.data.data.length > 0) {
           const url = response.data.data[0].url; // 注意：这里根据您的后端返回结构获取 URL

          if (url) {
            try {
              // 确保 Quill 实例存在且可用
              if (!quillInstance || !quillInstance.root) {
                throw new Error('Quill editor instance is not available or not properly initialized.');
              }

              // 直接操作 DOM 插入图片
              const img = document.createElement('img');
              img.src = url;
              img.style.maxWidth = '100%';
              img.style.height = 'auto';
              img.style.margin = '10px 0';
              img.style.borderRadius = '4px';
              
              // 将图片添加到编辑器内容中
              quillInstance.root.appendChild(img);
              
              // 触发内容更新
              const event = new Event('input', { bubbles: true });
              quillInstance.root.dispatchEvent(event);

              ElMessage.success('图片上传成功');
              console.log('图片插入成功:', url);
            } catch (error) {
              console.error('插入图片时出错:', error);
              ElMessage.error('插入图片失败，请重试');
              return;
            }
          } else {
            ElMessage.error('上传成功，但未获取到有效的图片 URL');
            console.error('上传成功，但未获取到有效的图片 URL:', response.data);
          }
        } else {
          ElMessage.error('图片上传失败：' + (response.data.msg || '未知错误'));
          console.error('图片上传失败，返回数据格式不正确或缺少 data 数组:', response.data);
        }

      } catch (error) {
        console.error('图片上传请求失败:', error);
        ElMessage.error('图片上传失败');
      }
    }
  };
}

export default {
  props: {
    modelValue: {
      type: String,
      default: ''
    },
    clubId: {
      type: Number,
      default: null
    },
    uploaderId: {
      type: Number,
      default: null
    }
  },
  emits: ['update:modelValue'],
  setup(props, { emit }) {
    const editorContainer = ref(null);
    const quill = ref(null);
    const quillInstance = ref(null);  // 添加一个新的 ref 来存储 Quill 实例

    onMounted(() => {
      const toolbarOptions = [
        ['bold', 'italic', 'underline', 'strike'],        // toggled buttons
        ['blockquote', 'code-block'],

        [{ 'header': 1 }, { 'header': 2 }],               // custom button values
        [{ 'list': 'ordered'}, { 'list': 'bullet' }],
        [{ 'script': 'sub'}, { 'script': 'super' }],      // superscript/subscript
        [{ 'indent': '-1'}, { 'indent': '+1' }],          // outdent/indent
        [{ 'direction': 'rtl' }],                         // text direction

        [{ 'size': ['small', false, 'large', 'huge'] }],  // custom dropdown
        [{ 'header': [1, 2, 3, 4, 5, 6, false] }],

        [{ 'color': [] }, { 'background': [] }],          // dropdown with defaults from theme
        [{ 'font': [] }],
        [{ 'align': [] }],
        
        ['image'], // image button

        ['clean']                                         // remove formatting button
      ];

      quillInstance.value = new Quill(editorContainer.value, {
        theme: 'snow', // or 'bubble'
        placeholder: '请输入内容...',
        modules: {
          toolbar: {
            container: toolbarOptions,
            handlers: {
              image: () => {
                if (!quillInstance.value) {
                  console.error('Quill instance is not available');
                  ElMessage.error('编辑器未初始化，请刷新页面重试');
                  return;
                }
                imageHandler(quillInstance.value, props.clubId, props.uploaderId);
              }
            }
          }
          // 可以根据需要添加其他模块，如 imageResize 等
        }
      });

      // 当编辑器内容变化时更新 v-model
      const updateModelValue = () => {
        emit('update:modelValue', quillInstance.value.root.innerHTML);
      };

      // 使用防抖处理文本变化事件
      const debouncedUpdate = debounce(updateModelValue, 100); // 100ms 防抖
      quillInstance.value.on('text-change', debouncedUpdate);

      // 设置初始内容
      if (props.modelValue) {
        quillInstance.value.root.innerHTML = props.modelValue;
      }
    });

    onBeforeUnmount(() => {
      if (quillInstance.value) {
        quillInstance.value.off('text-change');
        quillInstance.value.root.innerHTML = '';
        if (editorContainer.value) {
          editorContainer.value.innerHTML = '';
        }
      }
    });
    
    watch(() => props.modelValue, (newVal) => {
       // 只有当 v-model 的值与编辑器当前内容不同时才更新编辑器
       if (quillInstance.value && quillInstance.value.root.innerHTML !== newVal) {
           // 使用 setContents 或 pasteHTML 可能更安全，但这取决于具体内容和需求
           // 简单起见，先直接设置 innerHTML，如果遇到问题再换方法
           quillInstance.value.root.innerHTML = newVal;
       }
    });

    return {
      editorContainer
    };
  }
};
</script>

<style>
/* Quill 样式可以根据需要调整 */
.ql-editor {
  min-height: 250px; /* 调整编辑器区域最小高度 */
}
</style> 